(function () {
  function $(select) {
    return document.querySelector(select);
  }
  function $$(select) {
    return document.querySelectorAll(select);
  }
  /**
   * 从10~99之间任意选择一个数，把这个数字分别减去其十位数和个位数
   * 得到的结果一定是9的倍数，所以只要为9的倍数设置相同的图片即可
   */
  const imgIndex = 16; // 具有的图片数量
  const imgListSize = 100; // 页面中要显示图片数量
  let curImgNumber = null; // 当前图片下标（结果图片的下标）
  let isGameOver = false; // 游戏是否结束
  let gameNum = 0; // 游戏次数

  const imgList = $(".right");
  const resultContainer = $(".result-container");
  const round = $(".round");
  const result = $(".result");

  // 初始化
  function init() {
    initImgList();
    initEvent();
  }

  // 初始化事件
  function initEvent() {
    resultContainer.addEventListener("click", onShowResult);
    resultContainer.addEventListener("transitionend", onTransitionend);
  }

  // 初始化创建图片列表
  function initImgList() {
    let html = "";
    curImgNumber = getRandom(0, imgIndex); // 先随机选一张结果图片的下标

    for (let i = 100; i > 0; i--) {
      if (i % 9 == 0 && i!=0) {
        // 用户心里想的一定是9的倍数
        // 是9的倍数的，都使用下标为curImgNumber的图片
        html += `<div class="right-item"><span>${i}</span><img src="./images/values/${curImgNumber}.png"></div>`;
      } else {
        // 不是9的倍数的，随机选一张图片
        html += `<div class="right-item"><span>${i}</span><img src="./images/values/${getRandom(
          0,
          imgIndex
        )}.png"></div>`;
      }
    }
    imgList.innerHTML = html;
  }

  // 显示结果
  function onShowResult() {
    if (!isGameOver) {
      this.style.transition = "2s";
      this.style.transform = "rotate(5turn)";
    } else {
      if (confirm("猜对了？要再来一次吗？")) {
        restore();
      }
    }
  }

  // 显示动画结束后
  function onTransitionend() {
    isGameOver = true; // 游戏结束
    gameNum++; // 游戏次数+1
    // 显示结果
    round.style.opacity = 0;
    result.src = `./images/values/${curImgNumber}.png`;
    if (gameNum > 10) {
      gameNum = 0;
      setTimeout(function () {
        alert(
          "很惊讶吗？其实我不会魔法，我只是知道你算的结果一定是 9 的倍数，想一想吧！"
        );
      }, 1500);
    }
  }

  // 恢复起始状态
  function restore() {
    resultContainer.style = "";
    round.style.opacity = 1;
    initImgList();
    isGameOver = false;
  }

  // 获得[min,max)之间的随机数
  function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }

  init();
})();
